<template>
  <div class="box">
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="form"
      label-position="top"
      :inline="false"
      class="demo-form-inline"
    >
      <el-form-item label="按计划已完成内容：" required prop="completedPlanned">
        <el-input
          :disabled="title != '审查上报申请'"
          v-model="form.completedPlanned"
          placeholder=""
          maxlength="512"
          show-word-limit
          type="textarea"
          :rows="5"
        />
      </el-form-item>
      <el-form-item label="延迟完成内容及原因：" required prop="delayReasons">
        <el-input
          maxlength="512"
          show-word-limit
          :disabled="title != '审查上报申请'"
          v-model="form.delayReasons"
          type="textarea"
          :rows="5"
        />
      </el-form-item>
      <el-form-item label="下阶段工作重点及保证措施：" required prop="nextMeasures">
        <el-input
          maxlength="512"
          show-word-limit
          :disabled="title != '审查上报申请'"
          v-model="form.nextMeasures"
          type="textarea"
          :rows="5"
        />
      </el-form-item>
      <el-form-item label="其他说明：">
        <el-input
          maxlength="512"
          show-word-limit
          :disabled="title != '审查上报申请'"
          v-model="form.otherInstructions"
          type="textarea"
          :rows="5"
        />
      </el-form-item>
      <el-form-item label="附件:" style="width: 100%">
        <el-upload
          v-model:file-list="attachmentFile"
          :disabled="title != '审查上报申请'"
          ref="uploadRef"
          :limit="3"
          :headers="headers"
          action="/fastDfs/file/upload"
          :on-success="handleAttachment"
          :on-preview="previewAttachment"
          :on-remove="removeAttachment"
          :on-exceed="handleExceed"
          :on-error="handleError"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { useStore } from 'vuex'
import { defineComponent, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { type } from '@/utils/utils'
export default defineComponent({
  props: {
    title: {
      type: String,
      default:''
    },
  },
  setup(props) {
    const store = useStore()
    const ruleFormRef = ref()
    const data = reactive({
      filePathArray: [] as any,
      fileNameArray: [] as any,
    })
    const form =  store.state.projectCenter.reportDetailForm
    const rules = reactive({
      completedPlanned: { required: true, message: '请填写按计划已完成内容' },
      delayReasons: { required: true, message: '请填写延迟完成内容及原因' },
      nextMeasures: { required: true, message: '请填写下阶段工作重点及保证措施' },
    })
    console.log(form,'form');
    
    let attachmentFile = []
    if (form.filePath.length > 0) {
      attachmentFile = type(form.filePath)
        ? JSON.parse(form.fileName).map((item, index) => {
            return {
              name: item,
              url: JSON.parse(form.filePath)[index],
            }
          })
        : []
    }
    console.log(attachmentFile, 'attachmentFile')
    const handleAttachment = (uploadFile) => {
      if (uploadFile.code == 200) {
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        data.filePathArray.push(uploadFile.data.path)
        data.fileNameArray.push(uploadFile.data.fileName)
      } else {
        ElMessage({
          message: '上传失败',
          type: 'error',
        })
      }
    }
    const previewAttachment = (uploadFile) => {
      console.log(uploadFile, 'uploadFile')
      if (props.title?.includes('申请')) {
        window.open(uploadFile.response.data.path)
      } else {
        window.open(uploadFile.url)
      }
    }
    const removeAttachment = (file, uploadFiles) => {
      console.log(uploadFiles, 'uploadFiles')
      data.filePathArray = uploadFiles.map((fileItem) => {
        return fileItem.response.data.path
      })
      data.fileNameArray = uploadFiles.map((fileItem) => {
        return fileItem.response.data.fileName
      })
    }
    const handleExceed = () => {
      ElMessage({
        message: '最多上传3个附件',
        type: 'wraning',
      })
    }
    const handleError = () => {
      ElMessage({
        message: '上传失败',
        type: 'error',
      })
    }

    const submitForm = async () => {
      form.filePath = JSON.stringify(data.filePathArray)
      form.fileName = JSON.stringify(data.fileNameArray)
      return new Promise((resolve, reject) => {
        ruleFormRef.value.validate((valid) => {
          console.log(valid, 'valid')
          if (valid) {
            resolve(form)
          } else {
            ElMessage({
              message: '请将基本信息补充完整',
              type: 'warning',
            })
            reject('校验失败')
          }
        })
      })
    }
    const cookie = () => localStorage.getItem('token')
    return {
      form,
      store,
      rules,
      ruleFormRef,
      attachmentFile,
      submitForm,
      handleAttachment,
      previewAttachment,
      removeAttachment,
      handleExceed,
      handleError,
      headers: {
        Authorization: 'Bearer ' + cookie(),
      },
    }
  },
  beforeUnmount() {
    console.log('beforeUnmount', this.form)
    for (let key in this.form) {
      this.form[key] = ''
    }
  },
})
</script>
<style lang="scss" scoped>
:deep(.el-upload-list__item.is-success.focusing .el-icon-close-tip) {
  display: none !important;
}
</style>
